<!DOCTYPE html>
<html lang="en">
<head>
    <head>
    {include file="common/meta" /}
    </head>
</head>
<body>
	

{include file="common/head" /}

<!-- banner -->
<div class="idxbanner">
    <div class="swiper idxbannerSwiper">
    <div class="swiper-wrapper">
        {volist name="$section.banner" id="vo"}
        <div class="swiper-slide"><a style="display: block;height: 100%;">
            <img src="{$vo.image_en}" alt="">
        </a></div>
        {/volist}
    </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>


<!-- 简介 -->
<div class="idxjianjie w">
    <div class="title fl mx fadeInUp">
        {$section.jianjie.keywords_en}
    </div>
    <div class="cl"></div>

    <div class="idxjianjieshow clearfix">
        <div class="right fr mx fadeInRight "><img src="{$section.jianjie.image_en}" alt=""></div>
        <div class="left fl mx fadeInLeft">
            <!--<div class="title">{$section.jianjie.description_en}</div>-->
            <div class="con">
                <!-- <img class="conjt fl" src="__CDN__/static/images/jt.png" alt=""> -->
                {$section.jianjie.content_en}
            </div>
            <a href="{:url('about/index',['lanmu'=>2])}">Details</a>
        </div>
    </div>

</div>

<!-- 广告 -->
<div class="mx fadeInUp"><img src="{$section.img1.image_en}" alt=""></div>

<!-- 产品规格齐全 -->

<div class="cpge w">
    <div class="cpge_top clearfix">
        <div class="name fl">Complete specifications</div>
        <div class="cl"></div>
        <div class="list fl pc" style="margin-left:0">
            {volist name="$section.protype" id="vo"}
            <a href="{:url('products/index',['lanmu'=>7,'cid'=>$vo.id])}"><span data-id="{$i}" class="{if $i==1}active{/if}" >{$vo.name_en}</span></a>
            {/volist}
        </div>
        <a class="pc" href="{:url('products/index',['lanmu'=>7])}">Details</a>
        <div class="cl"></div>
        <div class="phone list">
            {volist name="$section.protype" id="vo"}
            <a href="{:url('products/index',['lanmu'=>7,'cid'=>$vo.id])}"><span data-id="{$i}" class="{if $i==1}active{/if}" >{$vo.name_en}</span></a>
            {/volist}
        </div>
        <div class="cl"></div>
        <a class="phone" href="{:url('products/index',['lanmu'=>7])}">Details</a>
    </div>
    {volist name="$section.protype" id="vo"}
    <div class="cpge_list clearfix">
        {volist name="$vo.list" id="v"}
        <div class=""><a href="{:url('products/show',['lanmu'=>7,'cid'=>$v.productstype,'id'=>$vo.id])}">
            <div class="img"><img src="{$v.image_en}" alt=""></div>
            <!--<p>{$v.name_en}</p>-->
        </a></div>
        {/volist}
    </div>
    {/volist}
</div>



<!-- 行业应用 -->
<div class="hyyy" style="background: url({$section.lingyu.1.image_en});">
    <div class="w">
        <div class="hyyy_name mx fadeInUp"><span>Application</span></div>
        <div class="hyyy_con mx fadeInUp"><a href="{:url('about/index',['lanmu'=>6])}">
            <div class="name">{$section.lingyu.1.name_en}</div>
            <div class="con">{$section.lingyu.1.content_en}</div>
        </a></div>
        <div class="list clearfix">
            {volist name="$section.lingyu" id="vo"}
            <div class="{if $i==2} active {/if} mx fadeInLeft ccc " data-name='{$vo.name_en}' data-con='{$vo.content_en}' data-image='{$vo.image_en}'><a href="{:url('about/index',['lanmu'=>6])}">
                <div><img src="__CDN__/static/images/p{$i}.png" alt=""></div>
                <p>{$vo.name_en}</p>
                <!--<span>{$vo.keywords_en}</span>-->
            </a></div>
            {/volist}

        </div>
    </div>
</div>


<!-- “走精品之路，做品牌企业” -->

<div class="pinpai w clearfix">
    <div class="left fl mx fadeInUp">
        <div class="title">{$section.idxdibu1.keywords_en}</div>
        <div class="con">
            <!-- <img class="conjt" src="__CDN__/static/images/jt.png" alt=""> -->
            {$section.idxdibu1.content_en}
        </div>
    </div>
    <div class="right fr mx zoomIn"><img src="{$section.idxdibu1.image_en}" alt=""></div>
</div>

<!-- 广告 -->
<div class="mx fadeInUp"><img src="{$section.idxdibu2.image_en}" alt=""></div>

{include file="common/foot" /}

</body>
</html>


<script>
//banner
var swiper = new Swiper(".idxbannerSwiper", {
    loop:true,
    autoplay: {
        delay: 3700,  // 循环时间
        disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay]。默认为true：停止。
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        el: ".swiper-pagination",
    },
});


//推荐产品分类 和 列表
$('.cpge_top .list span').hover(function(){
    var key = $(this).attr('data-id')
    $('.cpge_top .list span').removeClass('active')
    $(this).addClass('active')
    $('.cpge .cpge_list').hide()
    $(".cpge .cpge_list").eq(key-1).show()
})

//应用领域
$('.hyyy .list>div').hover(function(){
    var name = $(this).attr('data-name')
    var con = $(this).attr('data-con')
    var image = $(this).attr('data-image')
    $('.hyyy .list>div').removeClass('active')
    $(this).addClass('active')
    $('.hyyy').css('background','url('+image+')')
    $('.hyyy .hyyy_con .name').html(name)
    $('.hyyy .hyyy_con .con').html(con)
})



</script>


